<template>
  <div>
    <!--    <n-modal-->
    <!--        style="width: 600px"-->
    <!--        v-model:show="state.showModal"-->
    <!--        :mask-closable="false"-->
    <!--        preset="dialog"-->
    <!--        title="添加菜单">-->
    <!--    </n-modal>-->
    <c-modal @register="registerModal">
      <n-button v-if="form.type === 1103"  type="success"  @click="handleSyncSystemApi">更新系统api
        <template #icon>
          <n-icon>
            <RefreshCircleSharp/>
          </n-icon>
        </template>
      </n-button>
      <n-form
          label-width="100"
          label-align="left"
          class="m-t-20"
          :model="form"
          :rules="formRules"
          ref="formRef"
          label-placement="left">
        <n-form-item label="菜单类型:">
          <n-radio-group v-model:value="form.type">
            <n-radio v-for="type in menuType" :key="type.value" :value="type.value" class="m-l-10">
              {{ type.name }}
            </n-radio>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="标签名称:" path="label">
          <n-input placeholder="请输入标签名称" v-model:value="form.label"/>
        </n-form-item>
        <n-form-item label="前端路由名:" path="name" v-if="form.type !== 1103">
          <n-input placeholder="请输入前端路由名" v-model:value="form.name"/>
        </n-form-item>
        <n-form-item label="父目录:" path="parentId">
          <n-tree-select
              placeholder="请选择父目录(默认为根目录)"
              checkable
              cascade
              :options="menuTrees"
              :value="form.parentId"
              @update:value="handleSelectMenu"
          />
        </n-form-item>

        <n-form-item label="权限标识:" v-if="form.type === 1103">
          <n-input placeholder="请输入权限标识" v-model:value="form.perm"/>
        </n-form-item>

        <n-form-item label="关联接口:" v-if="form.type === 1103">
          <n-tree-select
              placeholder="请选择关联接口"
              multiple
              checkable
              cascade
              :options="apiTrees"
              :check-strategy="'parent'"
              :value="apisKeys"
              @update:value="handleSelectApi"
              clearable
          />
        </n-form-item>
        <n-form-item label="图标:" path="icon" v-if="form.type !== 1103">
          <n-select
              placeholder="请选择图标"
              v-model:value="form.icon"
              :render-tag="renderSelectIcon"
              :render-label="renderLabel"
              :options="iconOptions"
          />
        </n-form-item>
        <n-form-item label="是否隐藏:" path="status" v-if="form.type !== 1103">
          <n-radio-group v-model:value="form.hidden">
            <n-space>
              <n-radio :value="1101">是</n-radio>
              <n-radio :value="1102">否</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="排序:">
          <n-input-number placeholder="请输入排序" v-model:value="form.sort"/>
        </n-form-item>
      </n-form>
      <template #action>
        <div class="flex-end">
          <n-space>
            <n-button @click="closeModal()">取消</n-button>
            <n-button v-if="actionType === 'create'" type="primary" @click="handleSubmitAddMenu">提交</n-button>
            <n-button v-else type="warning" @click="handleSubmitAddMenu">修改</n-button>
          </n-space>
        </div>
      </template>
    </c-modal>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, reactive, Ref, ref, unref, computed, h } from 'vue';
import { menuType, baseForm, formRules, BaseFormType, renderSelectIcon, iconOptions, renderLabel } from '../data/menu'
import { CModal, useModal } from "../../../components/Modal";
import { reloadForm, syncValidate } from "../../../utils/common";
import { apiAddMenu, apiUpdateMenu } from "../../../api/system/menu";
import { useMessage, NAvatar } from "naive-ui";
import { apiMenuDetail } from "../../../api/system/menu";
import {apiSyncSystemApi} from '../../../api/system/api'
import {RefreshCircleSharp}  from '@vicons/ionicons5';
const message = useMessage()
const props = defineProps({
  apiTrees: Array,
  menuTrees: Array
})
const emmit = defineEmits(['submitSuccess','refreshApi'])

/** 使用弹窗 */
const actionType: Ref<string> = ref('create')
const [registerModal, { openModal, closeModal }] = useModal({ title: '添加菜单' });

async function showModal(type: string, updateId: Ref<number | null>) {
  openModal();
  actionType.value = type;
  if (type === 'create') {
    form.value = baseForm();
    // await reloadForm(formRef, form, baseForm);
  } else {
    const menuId = updateId.value;
    if (typeof menuId === 'number') {
      const { menuInfo } = await apiMenuDetail(menuId);
      form.value = menuInfo;
    }
  }
}

/**
 * 菜单管理
 */
let form: Ref<BaseFormType> = ref(baseForm())
let formRef: any = ref()
const apisKeys = computed(() => {
  return form.value.apiIds.map(id => Number(id))
})
defineExpose({
  showModal
})

/** 选择目录 */
function handleSelectMenu(menuKey: number): void {
  form.value.parentId = menuKey;
}

/** 选择api */
function handleSelectApi(apiKeys: []): void {
  form.value.apiIds = apiKeys;
}

/** 确定添加 */
async function handleSubmitAddMenu(e: Event) {
  e.preventDefault()
  await syncValidate(formRef);
  // 验证通过
  if (actionType.value === 'create') {
    await apiAddMenu(form.value);
    message.success('添加成功')
  } else {
    await apiUpdateMenu(form.value);
    message.success('修改成功')
  }
  closeModal();
  emmit('submitSuccess')
}

/** 同步系统api，通知父组件刷新 */
async function handleSyncSystemApi(){
  await apiSyncSystemApi();
  message.success('更新成功');
  emmit('refreshApi')
}
</script>

<style scoped>

</style>
